<script setup lang="ts">
import { getMessageListFn } from '@/api/message';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

interface MessageItem {
    id: number;
    title: string;
    content: string;
    time: string;
    img: string;
}
const token = localStorage.getItem('token');
const router = useRouter()
const messageList = ref<MessageItem[]>([]);
function loginClick() {
    router.push({
        name: 'mylogin',
        query: { from: 'true' }
    })
}

onMounted(() => {
    getMessageListFn().then(res => {
        // console.log(res.data.data)
        messageList.value = res.data.data
    })
})

</script>

<template>
    <div class="message" v-if="token">
        <header class="message-header">
            <span class="message-title">消息<svg t="1731318729209" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="6642" width="17" height="17">
                    <path
                        d="M876 330.57H596.89V225.71c0-26.24-23.18-47.59-51.67-47.59h-66.28c-28.49 0-51.67 21.35-51.67 47.59v104.86H148a28.07 28.07 0 0 0-28 28v138a28.07 28.07 0 0 0 28 28h67V898a27.9 27.9 0 0 0 27.87 27.87h538.42A27.9 27.9 0 0 0 809.17 898V524.66H876a28.07 28.07 0 0 0 28-28v-138a28.07 28.07 0 0 0-28-28.09zM481.66 232.5h60.84v98.06h-60.84z m273.12 639H269.39V524.66h485.39z m94.83-401.26H174.38V385h675.24z"
                        p-id="6643" fill="#bfbfbf"></path>
                    <path
                        d="M339.92 655.18h54.39v196.47h-54.39zM484.89 600.12h54.39v251.53h-54.39zM622.22 655.18h54.39v196.47h-54.39z"
                        p-id="6644" fill="#bfbfbf"></path>
                </svg></span>

            <span style="margin-right: 15px;"><svg t="1731318703302" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5575" width="32" height="32">
                    <path
                        d="M305.3 858c-27.3 0-49.4-22.1-49.4-49.4V235c0-27.3 22.1-49.4 49.4-49.4 27.3 0 49.4 22.1 49.4 49.4v573.6c0 27.3-22.1 49.4-49.4 49.4z"
                        fill="#bfbfbf" opacity=".8" p-id="5576"></path>
                    <path
                        d="M541.2 858c-27.3 0-49.4-22.1-49.4-49.4V235c0-27.3 22.1-49.4 49.4-49.4 27.3 0 49.4 22.1 49.4 49.4v573.6c-0.1 27.3-22.2 49.4-49.4 49.4z"
                        fill="#bfbfbf" opacity=".8" p-id="5577"></path>
                    <path
                        d="M777 858c-27.3 0-49.4-22.1-49.4-49.4V235c0-27.3 22.1-49.4 49.4-49.4 27.3 0 49.4 22.1 49.4 49.4v573.6c0 27.3-22.1 49.4-49.4 49.4z"
                        fill="#bfbfbf" opacity=".8" p-id="5578"></path>
                    <path d="M305.3 235m-69 0a69 69 0 1 0 138 0 69 69 0 1 0-138 0Z" fill="#bfbfbf" opacity=".8"
                        p-id="5579"></path>
                    <path d="M541.2 521.8m-69 0a69 69 0 1 0 138 0 69 69 0 1 0-138 0Z" fill="#bfbfbf" opacity=".8"
                        p-id="5580"></path>
                    <path d="M451.6 354.2m-6.3 0a6.3 6.3 0 1 0 12.6 0 6.3 6.3 0 1 0-12.6 0Z" fill="#bfbfbf" opacity=".8"
                        p-id="5581"></path>
                </svg></span>
        </header>

        <main class="message-main">
            <div class="message-list" v-for="item in messageList" :key="item.id" @click="$router.push('/message/chat')">
                <div class="left-message">
                    <van-image :src="item.img" />
                    <span>
                        <p style="color: #000; font-size: 16px;">{{ item.title }}</p>
                        <p style="color: #666; font-size: 13px; position: relative; bottom: 5px;">{{ item.content }}</p>
                    </span>
                </div>
                <div class="right-message" style="margin-right: 8px;">
                    <span style="color: #999;">{{ item.time }}</span>
                </div>
            </div>
        </main>
    </div>

    <div class="login-message" v-else>
        <header class="login-message-header">
            <span>消息</span>
        </header>
        <main class="login-message-main">
            <van-image
                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%B6%88%E6%81%AF_%E6%9C%AA%E7%99%BB%E5%BD%95/u300.png"></van-image>
            <p>登录后才可以查看消息哦</p>
            <button @click="loginClick">登录/注册</button>
        </main>
    </div>
</template>


<style scoped lang="scss">
.message {
    width: 100%;
    height: 100%;
    background-color: rgba(247, 247, 247, 1);

    .message-header {
        width: 100%;
        height: 60px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .message-title {
            font-size: 18px;
            color: #000;
            margin-left: 160px;
        }
    }

    .message-main {
        width: 100%;
        height: 100%;
        background-color: rgba(247, 247, 247, 1);
        padding-bottom: 50px;

        .message-list:last-child {
            padding-bottom: 50px;
        }

        .message-list {
            width: 100%;
            margin: 0 auto;
            background-color: white;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(247, 247, 247, 1);

            .left-message {
                width: 40%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-left: 10px;

                .van-image {
                    width: 35px;
                    height: 35px;
                }
            }

            .right-message {
                span {
                    margin-right: 20px;
                }
            }
        }

    }
}

.login-message {
    width: 100%;
    height: 100%;
    background-color: rgba(247, 247, 247, 1);

    .login-message-header {
        width: 100%;
        height: 60px;
        background-color: rgba(247, 247, 247, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #000
    }

    .login-message-main {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .van-image {
            width: 125px;
            height: 115px;
        }

        p {
            margin: 30px 0;
        }

        button {
            width: 135px;
            height: 40px;
            background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
            border-radius: 35px;
            border: 0;
            color: white;
        }

    }

}
</style>